import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path"; // 使用 import 语法
import postcssPxtorem from "postcss-pxtorem";
import tailwindcss from "tailwindcss";
import autoprefixer from "autoprefixer";

import { proxy } from "./config/proxy";

// https://vite.dev/config/
export default defineConfig({
  base: "./",
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  server: {
    // headers: {
    //   "Access-Control-Allow-Origin": "*",
    // },
    // proxy: proxy,
    // host: "0.0.0.0",
    port: 5178,
  },
  css: {
    preprocessorOptions: {
      less: {
        math: "always", // 括号内才使用数学计算
        globalVars: {
          // 全局变量
          mainColor: "red",
        },
      },
    },
    postcss: {
      plugins: [
        postcssPxtorem({
          rootValue: 37.5, // UI设计稿的宽度/10
          unitPrecision: 3, // 转rem精确到小数点多少位
          propList: ["*"], // 需要转换的属性 *表示所有
          selectorBlackList: ["ignore"], // 不进行px转换的选择器
          replace: true, // 是否直接更换属性值，而不添加备用属性
          mediaQuery: false, // 是否在媒体查询的css代码中也进行转换
          minPixelValue: 0, // 设置要替换的最小像素值
          exclude: /node_modules/i, // 排除node_modules文件夹下的文件
        }),
        autoprefixer,
        tailwindcss,
      ],
    },
  },
});
